<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>解决定时器多次点击</title>
  <style>
    #box {
      position: fixed;
      top: 100px;
      left: 0;
      width: 100px;
      height: 100px;
      background: pink;
    }
  </style>
</head>

<body>
  <button id="btn">点我开启定时器</button>
  <button id="endbtn">点我关闭定时器</button>
  <div id="box"></div>
  <script>
    // 题目：将定时器的开始和停止过程书写在不同的事件函数内部，容易出现用户多次点击出现加速且运动不能停止的情况，请给出解决代码。
    //思路：在创建定时器的事件内部每次创建定时器的时候都清除之前的定时器，这样就可以避免新建多个定时器的问题

    //获取元素两个按钮和div标签
    var btn = document.getElementById('btn'),
      endbtn = document.getElementById('endbtn'),
      box = document.getElementById('box'),
      //创建信号量，用于box定位
      nowLeft = 0,
      //创建计时器
      timer;

    //启动按钮点击事件，为了避免多次点击出现计时器效果叠加，每次创建定时器之前先清除之前的定时器
    btn.onclick = function () {
      //清除定时器
      clearInterval(timer);
      //新建定时器
      timer = setInterval(go, 1);
    }
    //关闭定时器按钮点击事件
    endbtn.onclick = function () {
      //清除定时器
      clearInterval(timer);
    }

    //定时器执行函数
    function go() {
      //信号量自增
      nowLeft++;
      //拉终停表
      if (nowLeft >= 500) {
        nowLeft = 500;
        clearInterval(timer);
      }
      //设置盒子定位
      box.style.left = nowLeft + 'px';
    }
  </script>
</body>

</html>